@use "sass:math";

.sketch-visibility__title {
  @include themify() {
    color: getThemifyVariable('hint-arrow-background-color');
  }
}

.sketch-visibility__icons {
  height: 30px;
  width: 30px;
  display: flex;
  gap: 5px;
}

.sketch-visibility {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sketch-visibility hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, white, transparent);
}

.sketch-visibility_ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-bottom: 7px;
}

.sketch-visibility_ul li {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
}

.sketch-visibility_ul li::before {
  content: "\2022";

  @include themify() {
    color: getThemifyVariable('hint-arrow-background-color');
  }

  font-size: 34px;
  margin-right: 10px;
}




.sketches-table-container {
  overflow-y: auto;
  max-width: 100%;
  min-height: 100%;

  @media (max-width: 770px) {
    @include themify() {
      background-color: getThemifyVariable("modal-background-color");
    }

    .sketches-table {
      display: flex;
      flex-direction: column;
      padding: #{math.div(16, $base-font-size)}rem;
      height: 100%;
      overflow-y: auto;

      thead {
        display: none;
      }

      tbody {
        display: flex;
        flex-direction: column;
        gap: #{math.div(12, $base-font-size)}rem;



        .sketches-table__row {
          margin: 0;
          position: relative;
          display: flex;
          flex-wrap: wrap;
          padding: #{math.div(15, $base-font-size)}rem;
          height: fit-content;
          gap: #{math.div(8, $base-font-size)}rem;

          @include themify() {
            border: 1px solid getThemifyVariable("modal-border-color");
            background-color: getThemifyVariable("search-background-color") !important;
          }

          .sketches-table_name {
            display: flex;
            gap: 5px;
            font-weight: bold;
            align-items: center;
          }


          >td {
            padding-left: 0;
            width: 30%;
            font-size: #{math.div(14, $base-font-size)}rem;

            @include themify() {
              color: getThemifyVariable("modal-border-color");
            }
          }

          .sketches-table__rowname {
            display: flex;
            gap: 5px;
            justify-content: center;
            align-items: center;
          }

          .sketch-list__dropdown-column {
            position: absolute;
            top: 0;
            right: #{math.div(4, $base-font-size)}rem;
            width: auto;
            margin: #{math.div(8, $base-font-size)}rem;
          }
        }
      }
    }
  }
}

.sketches-table {
  width: 100%;

  max-height: 100%;
  border-spacing: 0;

  & .sketch-list__dropdown-column {
    width: #{math.div(60, $base-font-size)}rem;
    position: relative;
  }
}

.sketches-table thead th {
  height: #{math.div(32, $base-font-size)}rem;
  position: sticky;
  top: 0;
  z-index: 1;

  @include themify() {
    background-color: getThemifyVariable("background-color");
  }
}

.sketch-list__sort-button {
  display: flex;
  align-items: center;
  height: #{math.div(35, $base-font-size)}rem;

  & .isvg {
    margin-left: #{math.div(8, $base-font-size)}rem;
  }

  & svg {
    margin-left: #{math.div(5, $base-font-size)}rem;
    @include themify() {
      fill: getThemifyVariable("inactive-text-color");
    }
  }
}

.sketches-table__header {
  border-bottom: 2px dashed transparent;
  padding: #{math.div(3, $base-font-size)}rem 0;

  @include themify() {
    color: getThemifyVariable("inactive-text-color");
  }
}

.sketches-table__header--selected {
  @include themify() {
    border-color: getThemifyVariable("logo-color");
  }
}

.sketches-table thead th:nth-child(1) {
  padding-left: #{math.div(12, $base-font-size)}rem;
}

.sketches-table__row {
  margin: #{math.div(10, $base-font-size)}rem;
  height: #{math.div(72, $base-font-size)}rem;
  font-size: #{math.div(16, $base-font-size)}rem;
}

.sketches-table__row:nth-child(odd) {
  @include themify() {
    background: getThemifyVariable("table-row-stripe-color");
  }
}

.sketches-table__row>th:nth-child(1) {
  padding-left: #{math.div(12, $base-font-size)}rem;
}

.sketches-table__row>td {
  padding-left: #{math.div(8, $base-font-size)}rem;
}

.sketches-table__row a {
  @include themify() {
    text-decoration: underline;
    color: getThemifyVariable("primary-text-color");
  }
  
}

.sketches-table__row.is-deleted-or-private>* {
  font-style: italic;
}

.sketches-table thead {
  font-size: #{math.div(12, $base-font-size)}rem;

  @include themify() {
    color: getThemifyVariable("inactive-text-color");
  }
}

.sketches-table th {
  font-weight: normal;
  overflow-wrap: break-word;
}

.sketches-table__name {
  display: flex;
  align-items: center;
}

.sketches-table__icon-cell {
  width: #{math.div(35, $base-font-size)}rem;
}

.sketches-table__empty {
  text-align: center;
  font-size: #{math.div(16, $base-font-size)}rem;
  padding: #{math.div(42, $base-font-size)}rem 0;
}
.sketches-table__row a:hover{
  @include themify() {
    color: getThemifyVariable("logo-color");
  }
  text-decoration-thickness: 0.1em;
}